<template>
  <basic-container>
    <div class="header">
      <TitleComponent mainTitle="短信记录" subTitle="列表" />
      <el-button text type="primary" @click="router.push('/index')">主页</el-button>
    </div>
    <div class="crud_content">
      <avue-crud :option="option" :table-loading="crudData.loading" :data="crudData.data" :page.sync="crudData.page"
        @selection-change="selectionChange" v-model="crudData.form" @row-save="rowSave" ref="crud" @row-update="rowUpdate"
        @search-change="searchChange" @search-reset="searchReset" @refresh-change="refreshChange" @on-load="onLoad">
        <template #menu="{ row }">
          <el-dropdown @command="(command) => handleCommand(command, row)">
            <el-icon style="rotate: 90deg;cursor: pointer" size="20">
              <More />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="view">查看</el-dropdown-item>
                <el-dropdown-item command="delete">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <template #menu-left="{ row }">
          <el-button class="btn" type="danger" @click="delsHandler" v-if="ids.length">
            批量删除
          </el-button>
        </template>
      </avue-crud>
    </div>
    <el-dialog v-model="crudData.confirmDeleteVisible" title="" width="440" destroy-on-close center class="custom-dialog">
      <div class="swal2-header">
        <div class="swal2-icon swal2-question swal2-animate-question-icon"></div>
        <div class="swal2_fs">确认删除？</div>
      </div>
      <div class="swal2_he">ID - {{ crudData.delIds }}</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button color="#488C6D" class="btn btn-primary" @click="handleDeleteConfirm">
            确认
          </el-button>
          <el-button class="btn" type="" @click="handleDeleteCancel">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>
  </basic-container>
</template>
<script setup lang="ts" name="taskDetail">
import { computed, reactive, ref } from 'vue';
import { getList, remove, update, save } from "@/api/refersh/message.js";
import TitleComponent from '@/components/title/index.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import BasicContainer from "@/components/basic-container/main.vue";
import { useRouter } from "vue-router";

const router = useRouter();
const ids = computed(() => (crudData.selectionList.map(item => item.id)))
const crud = ref('')
let option: any = reactive({
  height: 'auto',
  calcHeight: '8',
  searchShow: true,
  searchMenuSpan: 6,
  tip: false,
  border: true,
  index: false,
  viewBtn: false,
  editBtn: false,
  delBtn: false,
  addBtn: false,
  menuWidth: 100,
  dialogWidth: '40%',
  menuFixed: 'right',
  labelWidth: 130,
  gridBtn: false,
  menu: true,
  selection: false,
  searchLabelWidth: 110,
  indexLabel: '序号',
  saveBtnText: '确定',
  refreshBtn: true, // 刷新按钮
  columnBtn: false,
  searchShowBtn: false,
  indexWidth: 60,
  align: 'center',
  column: [
    // {
    //   label: "发件人号码",
    //   prop: "sendNum",
    //   search: true,
    //   span: 24,
    // },
    {
      label: "收件人号码",
      prop: "recipientNum",
      search: true,

      span: 24,
    },
    {
      label: "短信内容",
      prop: "content",
      span: 24,
      type: 'textarea'
    },
    {
      label: "状态",
      prop: "status",
      search: true,
      type: 'select',
      dicData: [
        {
          label: '成功',
          value: 1
        },
        {
          label: '失败',
          value: 0
        },
      ],
      span: 24,
    },
    {
      label: "响应",
      prop: "resp",
      span: 24,
    },
    {
      label: "发送时间",
      prop: "sendTime",
      display: false,
      disabled: true,
      span: 24,
    }
  ]
})
let crudData: any = reactive({
  loading: true,
  delIds: '',
  selectionList: [],
  confirmDeleteVisible: false,
  form: {
    edit: true,
    creat: "",
    view: "",
  },
  page: {
    pageSize: 10,
    currentPage: 1,
    total: 1,

  },
  openTyep: '',
  query: {},
  data: []
})
const selectionChange = (list) => {
  crudData.selectionList = list
}
const rowUpdate = async (row, index, done, loading) => {
  await update(row)
  onLoad(crudData.page)
  done();
}
const rowSave = async (row, done, loading) => {
  await save(row)
  onLoad(crudData.page)
  done();
}
const searchChange = (params, done) => {
  crudData.query = params;
  crudData.page.currentPage = 1;
  onLoad(crudData.page)
  done();
}
const searchReset = () => {
  crudData.query = {};
  onLoad(crudData.page)
}
const handleDeleteCancel = () => {
  crudData.confirmDeleteVisible = false;
}
const handleDeleteConfirm = async () => {
  await remove(crudData.delIds)
  crudData.confirmDeleteVisible = false;
  onLoad(crudData.page)
}
const delsHandler = async () => {
  if (crudData.selectionList.length === 0) {
    ElMessage.warning('请选择至少一条数据');
    return;
  }
  crudData.confirmDeleteVisible = true
  let id = ids.value
  console.log('ids', ids);
  crudData.delIds = id.join(',')
}
const handleCommand = (command, row) => {
  crudData.rowData = row
  if (command === 'edit') {
    crud.value.rowEdit(row)
  } else if (command === 'delete') {
    crudData.confirmDeleteVisible = true;
    crudData.delIds = row.id
  } else if (command === 'view') {
    crud.value.rowView(row)

  }
}

const refreshChange = () => {
  onLoad(crudData.page);
}
const onLoad = (page, params = {}) => {
  crudData.loading = true;
  getList(page.currentPage, page.pageSize, Object.assign(params, crudData.query)).then(res => {
    console.log('getReviewLog--', res);
    const Data = res.data;
    crudData.page.total = Data.total;
    crudData.data = Data.records
    crudData.loading = false;
  });
}
</script>
<style scoped lang="scss">
.custom-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
}

.swal2-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 2%;
}

.crud_content {
  width: 100%;
}

.swal2-icon {
  position: relative;
  box-sizing: content-box;
  justify-content: center;
  width: 5em;
  height: 5em;
  margin: 1.25em auto 1.875em;
  zoom: normal;
  border: 0.25em solid transparent;
  border-radius: 50%;
  line-height: 5em;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.swal2-icon.swal2-question::before {
  content: "?";
}

.swal2-icon::before {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92%;
  font-size: 3.75em;
}

.swal2-icon.swal2-question {
  border-color: #c9dae1;
  color: #87adbd;
}

.swal2_fs {
  margin: 0 0 0.4em;
  padding: 0;
  font-size: 25px;
  color: #595959;
  text-align: center;
  font-weight: 400 !important;
}

.swal2_he {
  text-align: center;
  color: #545454;
  font-size: 1.125em;
  font-weight: 300;
  line-height: normal;
  word-wrap: break-word;
}
</style>
